<template>
  <div>
     <tw-chart
        :dataset="schoolDataLine.dataset"
        :chartOption="schoolDataLine.chartOption"
        :chartDataMaps="schoolDataLine.chartDataMaps"
        height="260px"
      ></tw-chart>
  </div>
</template>
<script>
import TwChart from '@/components/TwChart.vue'
export default {
  components: {TwChart},
  name: 'tw-linebarschool',
  props: {
    source: {
      type: String,
      default: 'school'
    },
    degree: {
      type: String,
      default: '1'
    },
    dataset: {
      type: Array,
      default: () => []
    },
    chartDataMaps: {
      type: Array
    }
  },
  data () {
    return {
      schoolDataLine: {
        dataset: [],
        chartOption: {
          color: ['#005dfd', '#00f2f2', '#ffdc85'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['现有学校数量', '需要学校数量'],
            top: '2%',
            textStyle: {
              fontSize: 16
            },
            borderRadius: 5
          },
          grid: {
            top: '25%',
            left: '5%',
            right: '8%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              boundaryGap: true,
              axisLabel: {
                interval: 0,
                fontSize: 16
              }
            }],
          yAxis: [
            {
              type: 'value',
              splitNumber: 3,
              axisLabel: {
                fontSize: 16
              }
            },
            {
              type: 'value',
              splitNumber: 3,
              nameTextStyle: {
                color: '#94aad4',
                fontSize: 16
              },
              axisLabel: {
                fontSize: 16
              }
            }
          ],
          series: []
        },
        chartDataMaps: []
      }
    }
  },
  created () {
    this.initData()
    let watched = ['dataset', 'chartDataMaps']
    watched.forEach(prop => {
      this.$watch(prop, () => {
        this.initData()
      }, { deep: true })
    })
  },
  methods: {
    initData () {
      let vm = this

      if (vm.source === 'school') {
        vm.schoolDataLine.dataset = vm.dataset
        vm.schoolDataLine.chartDataMaps = vm.chartDataMaps.map(item => {
          return {
            ...item,
            type: item.name === '超额学校数量' ? 'bar' : 'line',
            yAxisIndex: item.name === '超额学校数量' ? 1 : 0,
            barMaxWidth: 15,
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                ? 'dot'
                : 'solid'
            },
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        })
      } else if (vm.source === 'house') {
        vm.schoolDataLine.dataset = vm.dataset
        vm.schoolDataLine.chartDataMaps = vm.chartDataMaps.map(item => {
          return {
            ...item,
            type: item.name === '生均面积' ? 'bar' : 'line',
            yAxisIndex: item.name === '生均面积' ? 1 : 0,
            barMaxWidth: 15,
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                ? 'dot'
                : 'solid'
            },
            markLine: item.name === '生均面积' ? {
              symbol: 'none',
              data: [{
                name: '生均面积',
                yAxis: 0.015,
                label: {
                  show: 'true',
                  position: 'middle',
                  formatter: '最低标准55M'
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    color: '#FF5D1D'
                  }
                }
              }]
            } : {},
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        })
      } else if (vm.source === 'student') {
        vm.schoolDataLine.chartOption.yAxis = [
          {
            type: 'value',
            splitNumber: 3,
            axisLabel: {
              fontSize: 16
            }
          }
        ]

        vm.schoolDataLine.dataset = vm.dataset
        vm.schoolDataLine.chartDataMaps = vm.chartDataMaps.map(item => {
          return {
            ...item,
            type: 'line',
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4' || item.dataKey === 'grade6'
                ? 'dot'
                : 'solid'
            }
          }
        })
      } else {
        vm.schoolDataLine.dataset = vm.dataset

        vm.schoolDataLine.chartDataMaps = vm.chartDataMaps.map(item => {
          return {
            ...item,
            type: item.name === '每百名学生教师数' ? 'bar' : 'line',
            yAxisIndex: item.name === '每百名学生教师数' ? 1 : 0,
            barMaxWidth: 15,
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                ? 'dot'
                : 'solid'
            },
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            },
            markLine: item.name === '每百名学生教师数' ? {
              symbol: 'none',
              data: [{
                name: '每百名学生教师数',
                yAxis: 0.015,
                label: {
                  show: 'true',
                  position: 'middle',
                  formatter: '最低标准55M'
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    color: '#FF5D1D'
                  }
                }
              }]
            } : {}
          }
        })
      }
    }
  }
}
</script>
